<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<header-custom title="学生信息" />
		<view class="container">
			<view class="edit">
				<view class="fboxCol">
					<!-- <view class="tips color-E85531 font20">
				<rich-text nodes="{{TIP0005 || ' <strong>注意事项：</strong> <br/>1.认证信息中“真实姓名”项，请填写您所在学校考试用的姓名；<br/>2.认证信息填写完成后，请您认真核对所填写信息是否正确，确认无误后并提交保存；<br/>3.认证信息只提供1次免费修改机会，之后将不再提供修改功能；<br/>4.请大家认真、正确填写认证信息，否则将影响后续成绩查询。'}}"></rich-text>
			  </view> -->
					<view class="tips font20" style="background:#f9f9f9;color:#999">
						<view class="fwb" style="color:#36363A">注意事项：</view>
						<view>1.认证信息中“真实姓名”项，请填写您所在学校考试用的姓名；</view>
						<view>2.认证信息填写完成后，请您认真核对所填写信息是否正确，确认无误后并提交保存；</view>
						<view>3.认证信息只提供3次免费修改机会，之后将不再提供修改功能；</view>
						<view>4.请大家认真、正确填写认证信息，否则将影响后续成绩查询。</view>
					</view>
					<view class="result fboxCol Xcenter">
						<input class="font28 select name w690" :value="student.studentName" maxlength="30" type="text"
							placeholder="考试姓名" placeholder-class="color-9899A1" @input="onTextChange" />
						<view class="font28 select w690 fboxRow Ycenter Xcenter" @click="tapInput('gradeName')">
							<text v-if="student.gradeName">{{student.gradeName}}</text>
							<text style="color:#9899A1" v-else>所在年级（高三/二/一）</text>
						</view>
						<view class="font28 select w690 fboxRow Ycenter Xcenter" @click="tapInput('identity')">
							<text v-if="student.identity">{{student.identity}}</text>
							<text style="color:#9899A1" v-else>您是学生/家长/老师？</text>
						</view>
					</view>
				</view>
				<view class="bottom">
					<view class="fixed-bottom w750 fboxRow Ycenter Xcenter bg-fff">
						<view class="w690 button fboxRow Ycenter Xcenter color-fff bg-00C15D" @tap="nextClick">保存
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-action-sheet :closeOnClickOverlay="true" round="20rpx" :actions="actions" @close="onClose" :show="show" @select="onSelect"></u-action-sheet>
	</view>
</template>

<script>
	import headerCustom from '@/pagesBKS/components/header-custom.vue';
	import {
		updateStudentInfo,
		saveStudentInfo,
		studentInfo,
		bksFunctionInfo
	} from '@/api/bks.index.js'
	import {debounce} from "@/static/js/common.js"
	export default {
		components: {
			headerCustom
		},
		data() {
			return {
				theme: 'bks-theme',
				globalColor: getApp().globalData.globalColor,
				student:{
					unitId: '',
					unitName: '',
					studentName: '',
					identity: '',
					gradeName: '',
				},
				num: 0,
				show: false,
				actions: [{
						name: '高三'
					},
					{
						name: '高二'
					},
					{
						name: '高一'
					}
				],
				actionsType: '',
				studentOld: {},
				step: 0
			}
		},
		onLoad(option) {
			if(option && option.step){
				this.step = option.step
			}
			this.getFunctionInfo()
			this.initInfo()
		},
		methods: {
			initInfo(){
				const student = uni.getStorageSync('bw_bks_student')
				if(student){
					this.student = student
				}
			},
			getFunctionInfo() {
				bksFunctionInfo({
					identify: 'TIP0005'
				}).then(res => {
					this.TIP0005 = res.data && res.data.briefIntroduction || null
				})
			},
			onClose() {
				this.show = false
			},
			onSelect(event) {
				const name = this.actionsType
				this.student[name] = event.name
			},
			// 点击input
			tapInput(e) {
				const type = e
				const list = type == "gradeName" ? [{
					name: '高三'
				}, {
					name: '高二'
				}, {
					name: '高一'
				}] : [{
					name: '学生'
				}, {
					name: '家长'
				}, {
					name: '老师'
				}];
				this.show = true
				this.actions = list
				this.actionsType = type
			},
			// 姓名change事件
			onTextChange(e) {
				this.student.studentName = e.detail.value.trim()
			},
			nextClick(e) {
				const {
					studentName,
					identity,
					gradeName
				} = this.student
				if (studentName.replace(/(^\s+)|(\s+$)/g, "") && identity && gradeName) {
					this.onClick()
				} else {
					let tit = ''
					if (!studentName.replace(/(^\s+)|(\s+$)/g, "")) {
						tit = '请输入考试姓名'
					} else if (!gradeName) {
						tit = '请选择所在年级'
					} else if (!identity) {
						tit = '请选择身份'
					}
					wx.showToast({
						title: tit,
						icon: 'none'
					})
				}
			},
			// 保存
			onClick: debounce(function(){
				uni.showModal({
					content: '请您再次确认所填写信息是否正确？否则将影响后续成绩查询。',
					confirmColor: '#00C15D',
					success: (res) => {
						if(res.confirm){
							// const bw_bks_user = uni.getStorageSync('bw_bks_user') || {}
							// on confirm
							let { studentName, unitName, unitId, gradeName, identity } = this.student
							 // this.student.memberId = bw_bks_user.memberId
							// 接口学生信息和修改后的学生信息做对比
							studentInfo().then(res => {
								const data = res.data
								if (data) {
									if (data.studentName == studentName && data.unitId == unitId && data.gradeName == gradeName && data.identity == identity) {
										this.back()
									} else {
										this.postInfo(this.student, 1)
									}
								} else {
									this.postInfo(this.student, 0)
								}
							})
						}
					}
				})
			},1000),
			postInfo(params, type) {
				const fun = type == 1 ? updateStudentInfo : saveStudentInfo
				fun(params).then(res => {
					this.back()
					uni.setStorageSync('bw_bks_student', this.student)
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: 'none'
					})
				})
			},
			// 返回
			back() {
				uni.showToast({
					title: '修改成功',
					icon: 'none',
					duration: 2000,
					success: () => {
						uni.navigateBack({
							delta: Number(this.step)
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	/* pages/mine/certification/index.wxss */
	.container {
		position: relative;
		padding-bottom: 30rpx;
	}

	.container .tips {
		padding: 30rpx;
		background: rgba(255, 230, 170, .3);
		border-radius: 4rpx;
		line-height: 36rpx;
		margin-bottom: 47rpx;
		margin: 20rpx 30rpx 0;
	}

	.container .edit {
		padding: 30rpx;
	}

	.container .search {
		width: 630rpx;
		height: 80rpx;
		background: #F5F6F6;
		border-radius: 34rpx;
		padding: 0 30rpx;
		margin-bottom: 30rpx;
	}

	.container .name {
		width: 630rpx;
	}
	.container .select{
		height: 80rpx;
		border-bottom: 1px solid #F5F6F6;
		text-align: center;
		padding: 0 30rpx;
		margin-bottom: 30rpx;}

	.container .result {
		height: 500rpx
	}

	.bottom {
		height: 120rpx;
	}

	.fixed-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 30rpx 0;
		z-index: 2;
	}

	.fixed-bottom .button {
		height: 80rpx;
	}

	.container .result .list .item {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		border: 1px solid #EBEBF0;
		border-radius: 8rpx;
		margin-bottom: 20rpx;
	}

	.container .result .list .item:last-child {
		margin-bottom: 0;
	}

	.container .result .list .item.check {
		background: #F5FAF7;
		border: 1px solid #00C15D;
		color: #00C15D;
	}

	.container .van-cell__title,
	.container .van-field__label {
		font-weight: bold;
		font-size: 28rpx;
		color: #36363A;
	}

	.container .van-cell__value,
	.container .van-cell__right-icon-wrap {
		font-size: 22rpx;
	}

	.container .van-cell {
		height: 98rpx;
		display: flex;
		align-items: center;
		padding: 0;
	}

	.container .van-cell:after {
		border: 0;
	}

	.container .apply {
		position: absolute;
		bottom: 90rpx;
		width: 100%;
		text-align: center;
	}
</style>